@extends('index.layouts.page_app')

@section('header')
    <link href="{{ asset('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/admin/layui/css/layui.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/master.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/gloable.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/nprogress.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/blog.css') }}" rel="stylesheet" type="text/css">
    <style>
        .doc-container {
            padding-top: 5px
        }
        .layui-carousel[lay-anim=updown]>[carousel-item]>*, .layui-carousel[lay-anim=fade]>[carousel-item]>* {
            left: 5px!important;
            top: 10px!important;
        }

        .layui-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            right: 51px;
            text-align: right;
        }
        .layui-card {
            margin-bottom: 0px;
        }

        .layui-card-border {
            border: 1px #A7A7A7 solid;
            height:250px;
            margin: 5px;
            border-radius: 5px;
            box-shadow: 2px 5px 5px rgba(0,0,0,.6);
        }
        .card-min-height {
            min-height: 200px;
            overflow: hidden;
            padding: 8px 4px;
        }

        .card-height {
            height: 300px;
        }
    </style>
@endsection
@section('content')
    <div class="doc-container" id="doc-container">
        <div class="container-fixed" style="width:100%">
            <div class="col-content" style="width:100%">
                <div class="inner">

                    <div class="layui-fluid" id="inventory">
                        <div class="layui-card">

                            <div class="layui-card-body">
                                <div class="">
                                    <div class="layui-row layui-col-space15">

                                        <div class="layui-col-md6 card-min-height">
                                            {{--价格表--}}
                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                                <div id="chart01" class="layui-card-border"></div>
                                            </div>
                                        </div>


                                        <div class="layui-col-md6 card-min-height">
                                            {{--流入表--}}
                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                                                <div id="chart02" class="layui-card-border"></div>
                                            </div>
                                            {{--量表--}}
                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                                                <div id="chart04" class="layui-card-border"></div>
                                            </div>
                                        </div>


                                        <div class="layui-col-md12 card-min-height">
                                            {{--盘口表--}}
                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                                                <div id="chart03" class="layui-card-border"></div>
                                            </div>

                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                                                <div id="chart03_1" class="layui-card-border"></div>
                                            </div>

                                        </div>

                                        <div class="layui-col-md12 card-min-height">
                                            {{--历史数据--}}
                                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                                <div id="chart_pe" class="card-height layui-card-border" style="height: 650px"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ asset('/admin/layui/layui.js') }}"></script>
    <script src="{{ asset('/js/jquery.min.js') }}"></script>
    <script src="{{ asset('/js/echarts/echarts.min.js') }}"></script>
    <script src="{{ asset('/js/index/gloable.js') }}"></script>
    <script src="{{ asset('/js/index/nprogress.js') }}"></script>
    <script src="{{ asset('/js/index/pagecomment.js') }}"></script>
    <script>NProgress.start();</script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
        function formatterTime(value){
            var date = new Date(value);
            var texts = [];
            texts[0] = [date.getFullYear(),timeDoubleDigit(date.getMonth() + 1), timeDoubleDigit(date.getDate())];
            texts[1] = [timeDoubleDigit(date.getHours()), timeDoubleDigit(date.getMinutes()), timeDoubleDigit(date.getSeconds())];
            return texts;
        }
        function timeDoubleDigit(value){
            return value < 10 ? '0' + value: value;
        }
        function getLegendName(data) {
            var arr = [];
            for(var i = 0;i<data.length;i++) {
                arr.push(this.data[i].name);
            }
            return arr;
        }

       /* 获取图表数据 */
        var chartDatas_data_zj = [];
        var chartDatas_data_cost = [];
        var chartDatas_data_pksh = [];
        var chartDatas_data_pksh_list = [];
        var chartDatas_data_cjl = [];
        $.ajax({
            type:"get",
            url:"{{ route('get_cost_line') }}" + "?id={{$request->id}}",
            async: false,
            success:function(obj){
                chartDatas_data_zj = obj.data_jg;
                chartDatas_data_cost = obj.data_zlzj;
                chartDatas_data_pksh = obj.data_pk_one;
                chartDatas_data_pksh_list = obj.data_pk_list;
                chartDatas_data_cjl = obj.data_cjl;
            }
        });

        var option = {
            color: ['#1a80ff', '#ff8c1b', '#67c23a'],
            calculable : true,
            title: {
                text: '实时价格',
                    textStyle: {
                        fontSize: 14
                    }
             },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                        fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['实时价格'],
            },
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                    data: chartDatas_data_zj.map(function (item) {
                        return item[0];
                    }),
                    boundaryGap: false,
                    splitLine: {
                    show: true,
                        lineStyle: {
                        color: '#e5e8ef',
                            type: 'dashed'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color: '#e5e8ef'
                    }
                },
                axisLabel: {
                    show: true,
                        textStyle: {
                        color: '#646b7f'
                    },
                    formatter: function (value) {
                        return formatterTime(value)[1].join(':') + '\n'+ formatterTime(value)[0].splice(1, 2).join('-');
                    }
                }
            },
            yAxis: [
                {
                    name:'',
                    type:'value',
                    min:'dataMin',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#646b7f',
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: '#e5e8ef',
                            type: 'dashed'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e5e8ef',
                            width: 3
                        }
                    }
                }
            ],
            series: {
                name: '实时价格',
                type: 'line',
                symbol: 'none',
                itemStyle: { color: '#c21f31'},
                // smooth:true,
                data: chartDatas_data_zj.map(function (item) {
                    return item[1];
                })
            },
            animationEasing: 'elasticOut'
        };

        var myChart01 = echarts.init(document.getElementById('chart01'));
        myChart01.setOption(option);

        var option2 = {
            color: ['#1a80ff', '#ff8c1b', '#67c23a'],
            calculable : true,
            title: {
                text: '主力净流入',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                    fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['主力净流入'],
            },
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                data: chartDatas_data_cost.map(function (item) {
                    return item[0];
                }),
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color: '#e5e8ef'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#646b7f'
                    },
                    formatter: function (value) {
                        return formatterTime(value)[1].join(':') + '\n'+ formatterTime(value)[0].splice(1, 2).join('-');
                    }
                }

            },
            yAxis: [
                {
                    name:'',
                    type:'value',
                    min:'dataMin',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#646b7f',
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: '#e5e8ef',
                            type: 'dashed'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e5e8ef',
                            width: 3
                        }
                    }
                }
            ],
            series: {
                name: '主力净流入',
                type: 'line',
                symbol: 'none',
                itemStyle: { color: '#c21f31'},
                // smooth:true,
                data: chartDatas_data_cost.map(function (item) {
                    return item[1];
                })
            },
            animationEasing: 'elasticOut'
        };
        var myChart02 = echarts.init(document.getElementById('chart02'));
        myChart02.setOption(option2);

        var option3 = {
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                data: ['买盘大单', '买盘小单', '卖盘大单', '卖盘小单']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: chartDatas_data_pksh[1],
                type: 'bar',
                barWidth: '40%',
                itemStyle:{
                    color:function(params){
                        var colorList = ['#cc1d16','#ff314c','#3aa862','#1eee21']
                        return colorList[params.dataIndex]
                    }
                }
            }]
        };
        var myChart03 = echarts.init(document.getElementById('chart03'));
        myChart03.setOption(option3);

        var option3_1 = {
            color: ['#1a80ff', '#ff8c1b', '#67c23a'],
            calculable : true,
            title: {
                text: '盘口信息',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                    fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['买盘大单', '买盘小单', '卖盘大单', '卖盘小单'],
            },
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                data: chartDatas_data_pksh_list.map(function (item) {
                    return item[0];
                }),
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color: '#e5e8ef'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#646b7f'
                    },
                    formatter: function (value) {
                        return formatterTime(value)[1].join(':') + '\n'+ formatterTime(value)[0].splice(1, 2).join('-');
                    }
                }
            },
            yAxis: [
                {
                    name:'',
                    type:'value',
                    min:'dataMin',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#646b7f',
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: '#e5e8ef',
                            type: 'dashed'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e5e8ef',
                            width: 3
                        }
                    }
                }
            ],
            series: [
                {
                    name: '买盘大单',
                    type: 'line',
                    symbol: 'none',
                    itemStyle: { color: '#a23842'},
                    // smooth:true,
                    data: chartDatas_data_pksh_list.map(function (item) {
                        console.log( item[1][0]);
                        return item[1][1];
                    })
                },
                {
                    name: '买盘小单',
                    type: 'line',
                    symbol: 'none',
                    itemStyle: { color: '#c2776a'},
                    // smooth:true,
                    data: chartDatas_data_pksh_list.map(function (item) {
                        return item[1][2];
                    })
                },
                {
                    name: '卖盘大单',
                    type: 'line',
                    symbol: 'none',
                    itemStyle: { color: '#3aa862'},
                    // smooth:true,
                    data: chartDatas_data_pksh_list.map(function (item) {
                        return item[1][3];
                    })
                },
                {
                    name: '卖盘小单',
                    type: 'line',
                    symbol: 'none',
                    itemStyle: { color: '#99c28a'},
                    // smooth:true,
                    data: chartDatas_data_pksh_list.map(function (item) {
                        return item[1][4];
                    })
                }
            ],
            animationEasing: 'elasticOut'
        };
        var myChart03_1 = echarts.init(document.getElementById('chart03_1'));
        myChart03_1.setOption(option3_1);

        var option4 = {
            color: ['#1a80ff', '#ff8c1b', '#67c23a'],
            calculable : true,
            title: {
                text: '成交量',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',
                padding: 10,
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                    fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['成交量'],
                right: 20
            },
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                data: chartDatas_data_cjl.map(function (item) {
                    return item[0];
                }),
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color: '#e5e8ef'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#646b7f'
                    },
                    formatter: function (value) {
                        return formatterTime(value)[1].join(':') + '\n'+ formatterTime(value)[0].splice(1, 2).join('-');
                    }
                }

            },
            yAxis: [
                {
                    name:'',
                    type:'value',
                    min:'dataMin',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#646b7f',
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: '#e5e8ef',
                            type: 'dashed'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e5e8ef',
                            width: 3
                        }
                    }
                }
            ],
            series: {
                name: '成交量',
                type: 'line',
                symbol: 'none',
                itemStyle: { color: '#c21f31'},
                // smooth:true,
                data: chartDatas_data_cjl.map(function (item) {
                    return item[1];
                })
            },
            animationEasing: 'elasticOut'
        };
        var myChart04 = echarts.init(document.getElementById('chart04'));
        myChart04.setOption(option4);



        ///////////////////////////////////////////////////////////////////////////////////////////////
        var pe_data = [];

        $.ajax({
            type:"get",
            url:"{{ route('get_pe_data') }}" + "?id={{$request->id}}",
            async: false,
            success:function(obj){
                pe_data = obj;
            }
        });

        var pe_data_time = pe_data.map(function (item) {
            return formatterTime(item.date)[0].join('-');
        });

        var option5 = {
            calculable : true,
            title: {
                text: '历史数据',
            },
            tooltip: {
                trigger: 'axis',
                padding: 10,
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                    fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['价格', 'PE', 'PB'],
                right: 20
            },

            axisPointer: {
                link: {xAxisIndex: 'all'}
            },
            // dataZoom: [
            //     {
            //         show: false,
            //         realtime: true,
            //         start: 0,
            //         end: 100,
            //         xAxisIndex: [0, 1]
            //     },
            //     {
            //         type: 'inside',
            //         realtime: true,
            //         start: 0,
            //         end: 100,
            //         xAxisIndex: [0, 2]
            //     },
            //     {
            //         type: 'inside',
            //         realtime: true,
            //         start: 0,
            //         end: 100,
            //         xAxisIndex: [0, 3]
            //     }
            // ],
            grid: [{
                left: 50,
                right: 50,
                height: 140
            }, {
                left: 50,
                right: 50,
                top: 250,
                height: 140
            }, {
                left: 50,
                right: 50,
                top: 440,
                height: 140
            }],
            xAxis: [{
                type: 'category',
                data: pe_data_time,
                boundaryGap: false,
                axisLine: {
                    onZero: true,
                    lineStyle:{
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
            },{
                gridIndex: 1,
                type: 'category',
                data: pe_data_time,
                boundaryGap: false,
                axisLine: {
                    onZero: true,
                    lineStyle:{
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
            },{
                gridIndex: 2,
                type: 'category',
                data: pe_data_time,
                boundaryGap: false,
                axisLine: {
                    onZero: true,
                    lineStyle:{
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e5e8ef',
                        type: 'dashed'
                    }
                },
            },
            ],
            yAxis: [
                {
                    name:'价格',
                    type:'value',
                    // min:'dataMin',
                },
                {
                    gridIndex: 1,
                    name:'PE',
                    type:'value',
                    // min:'dataMin',
                },{
                    gridIndex: 2,
                    name:'PB',
                    type:'value',
                    // min:'dataMin',
                }
            ],
            series: [
                {
                    name: '价格',
                    type: 'line',
                    symbol: 'none',
                    hoverAnimation: false,
                    data: pe_data.map(function (item) {
                        return item.price;
                    })
                },
                {
                    name: 'PE',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    symbol: 'none',
                    hoverAnimation: false,
                    data: pe_data.map(function (item) {
                        return item.pe;
                    })
                },
                {
                    name: 'PB',
                    type: 'line',
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    symbol: 'none',
                    hoverAnimation: false,
                    data: pe_data.map(function (item) {
                        return item.pb;
                    })
                },
            ],
            animationEasing: 'elasticOut',
        };
        var myChart05 = echarts.init(document.getElementById('chart_pe'));
        myChart05.setOption(option5);


    </script>
@stop
